<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>01vue基本使用</title>
		<script src="../vue@3.2.23.js"></script>
	</head>
	<body>
		<!-- 模板 -->
		<div id="app">
			<div class="val1">{{val1}}</div>
			<div class="val2">{{val2}}</div>
			<div class="goods">{{goods}}</div>
			<div class="sum">{{sum()}}</div>
			<button class="btn" @click="upData()">更改</button>
			<div class="num" v-for="item in list">
				{{item}}
			</div>
			<div class="if" v-if="isShow">
				{{isShow}}
			</div>
			<div class="if" v-if="isShow">
				{{mounted()}}
			</div>
		</div>
	</body>
</html>
<script>
	//vue:面向数据编程
	const {createApp,ref} = Vue;
	//创建一个APP应用程序  application
	const app = createApp({
		//vue管理的数据
		data(){
			return{
				goods:'goods',
				val1:1,
				val2:2,
				list:[1,2,3],
				isShow:true,
				count:0
			}
		},
		//方法
		methods:{
			sum(){
				return this.val1+this.val2
			},
			upData(){
				this.goods = "1"
			}
			mounted(){
				setInterval(() =>{
					this.count++
				},1000)
			}
		}
	});
	//mvvm的思维模型,m:model数据,v:view视图,vm:viewmodel
	const vm = app.mount('#app')
</script>